<template>
  <div class="modal1">
    <div class="btn"
         @click="goCoupon"></div>
  </div>
</template>
<script>
export default {
  props: {},
  data () {
    return {}
  },
  methods: {
    goCoupon () {
      this.$emit('goCoupon')
    }
  }
}
</script>
<style lang="less" scoped>
.modal1 {
  margin-top: 20px;
  width: 100%;
  height: 630px;
  background: url(https://s-test.kcimg.cn/m/images/bbs/coupon/modal1_bg.png);
  background-size: 100% 100%;
  overflow: hidden;
  .btn {
    width: 392px;
    height: 104px;
    margin: 286px auto 0;
    background: url(https://s-test.kcimg.cn/m/images/bbs/coupon/modal1_btn.png);
    background-size: 100% 100%;
    -webkit-animation: change 1.4s ease-out 0s infinite;
    -moz-animation: change 1.4s ease-out 0s infinite;
    animation: change 1.4s ease-out 0s infinite;
  }
  @keyframes change {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
}
</style>
